<%--
  Created by IntelliJ IDEA.
  User: xianfei
  Date: 15-12-28
  Time: 上午9:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
    <title>Vue Model</title>
</head>
<body>
<div id="goodData">
    <button class="btn btn-default" @click="findAllData()">显示数据</button>

    <table class="table table-striped">
        <th width="10%">名字</th>
        <th width="10%">年龄</th>
        <th width="20%">操作</th>
        <tbody>
        <tr v-for="(index,good) in goods">
            <td>{{good.name}}</td>
            <td>{{good.age}}</td>
            <td>
                <a href="javascript:" @click="modifyGood(good,index)">修改</a>&nbsp;
                <a href="javascript:" @click="saveGood(good,index)">保存</a>&nbsp;
                <a href="javascript:" @click="cancelGood(good,index)">取消</a>&nbsp;
                <a href="javascript:" @click="delGood(good)">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
    <div>
        <input type="text" v-model="aGood.name" placeholder="名字">
        <input type="text" v-model="aGood.age" placeholder="年龄">
        <input type="hidden" v-model="aGood.guid">
        <a class="btn btn-default" @click="addGood()">添加</a>
    </div>
    <div>
        <p>{{message}}</p>
        <input v-model="message">
    </div>
    <span>{{message}}</span>
    <button @click="changeMessage">Click</button>
</div>
<hr/>
<div id="study">
    <p>{{fullName}}</p>
    <a @click="changeFull('123')">点击改变</a>
    <a @click="changeFirst('456')">点击改变</a>
    <div v-for="item in item" track-by="$index">
        <span>{{item.guid}}</span>
        <input type="text" value={{item.name}}>
    </div>
    <a @click="showArray()">打印数组</a><br/>
    <span>{{abc}}</span>
    <input type="text" v-model="abc">
    <div>
        <span>{{countNum.length-1}}</span>
        <textarea v-model="countNum"></textarea>
    </div>
</div>
<script>
    var studentModel = new Vue({
        el: '#goodData',
        data: {
            goods: [],
            message: 'Hello I\'m LiuXianFei!'
        },
        methods: {
            modifyGood: function (good, index) {
                var inName = '<input type="text" value="' + good.name + '">';
                $("tbody tr").eq(index).find("td").eq(0).html(inName);
                var inAge = '<input type="text" value="' + good.age + '">';
                $("tbody tr").eq(index).find("td").eq(1).html(inAge);
            },
            delGood: function (good) {
                $this = this;
                $.ajax({
                    url: '/index/del_good/' + good.guid,
                    type: 'get',
                    success: function (data) {
                        if (data.result) {
                            $this.goods.$remove(good);
                        }
                    }
                })
            },
            addGood: function () {
                $this = this;
                $.ajax({
                    url: '/index/save_good',
                    type: 'post',
                    data: {name: $this.aGood.name, age: $this.aGood.age},
                    success: function (data) {
                        if (data.result) {
                            $this.aGood.guid = data.data;
                            $this.goods.push($this.aGood);
                            $this.aGood = '';
                        }
                    }
                })
            },
            findAllData: function () {
                var $this = this;
                $.ajax({
                    url: '/index/all_good',
                    type: 'get',
                    success: function (data) {
                        $this.goods = data;
                    }
                })
            },
            saveGood: function (good, index) {
                $this = this;
                var name = $("tbody tr").eq(index).find("td").eq(0).find("input").val();
                var age = $("tbody tr").eq(index).find("td").eq(1).find("input").val();
                if (name != undefined) {
                    $.ajax({
                        url: '/index/update_good',
                        type: 'post',
                        data: {guid: good.guid, name: name, age: age},
                        success: function (data) {
                            if (data.result) {
//                                $this.findAllData();
                                $this.$set('goods[' + index + '].name', name);
                                $this.$set('goods[' + index + '].age', age);
                                $("tbody tr").eq(index).find("td").eq(0).html(name);
                                $("tbody tr").eq(index).find("td").eq(1).html(age);
                            }
                        }
                    })
                }
            },
            cancelGood: function (good, index) {
                $("tbody tr").eq(index).find("td").eq(0).html(good.name);
                $("tbody tr").eq(index).find("td").eq(1).html(good.age);
            },
            changeMessage: function () {
                this.message = this.message.split('').reverse().join('');
            }
        }
    })

    var studyVue = new Vue({
        el: '#study',
        data: {
            firstName: 'Liu',
            lastName: 'XianFei',
            fullName: '123',
            item: [
                {guid: '1', name: '打开房间'},
                {guid: '2', name: '空间'},
                {guid: '3', name: 'iouv'}
            ],
            abc: 4
        },
        methods: {
            changeFull: function (value) {
                this.fullName.set(value);
            },
            changeFirst: function (value) {
                this.firstName = value;
            },
            showArray: function () {
                console.log(this.item);
            }
        },
        computed: {
            fullName: {
                get: function () {
                    return this.firstName + ' ' + this.lastName;
                },
                set: function (value) {
                    var name = value.split(' ');
                    this.firstName = name[0];
                    this.lastName == name[name.length - 1];
                }
            }
        }
    })

    studyVue.$watch('firstName', function (val) {
        this.fullName = val + ' ' + this.lastName;
    })


    $(function () {
//        $.ajax({
//            url: '/index/all_good',
//            type: 'get',
//            success: function (data) {
//                studentModel.goods = data;
//            }
//        })
    })

</script>
</body>
</html>